import { DemoGrid } from 'components/Demo/DemoGrid'
import { Demo } from 'components/Demo/Demo'

import GooBobsDemo from '@react-spring/demo/src/sandboxes/goo-blobs/src/App'
import TrailDemo from '@react-spring/demo/src/sandboxes/trail/src/App'

# useTrail

## Overview

```js
import { useTrail, animated } from 'react-spring'
```

Creates multiple springs with a single config, each spring will follow the previous one. Use it for staggered animations.

### Either: overwrite values to change the animation

If you re-render the component with changed props, the animation will update.

```jsx
const trail = useTrail(amount, { opacity: 1 })
```

### Or: pass a function that returns values, and update using "set"

You will get an API object back. It will not cause the component to render like an overwrite would (the animation still executes of course). Handling updates like this is useful for fast-occurring updates, and you should generally prefer it as it's more powerful. Further documentation can be found in [Imperatives & Refs](/common/imperatives-and-refs#api-methods)

```jsx
const [trail, api] = useTrail(amount, () => ({ opacity: 1 }))

// Update trail
api.start({ opacity: 0 })
// Stop trail
api.stop()
```

### Finally: distribute animated props among the view

The return value is an array containing animated props.

```jsx
return trail.map(styles => <animated.div style={styles} />)
```

## Properties

All properties of the [shared-api](/docs/hooks/api) apply.

## Demos

<DemoGrid>
  <Demo title="Goo Blobs">
    <GooBobsDemo />
  </Demo>
  <Demo title="Trail">
    <TrailDemo />
  </Demo>
</DemoGrid>
